<template>
  <div class="mycar">
     <van-goods-action>
            <van-goods-action-icon icon="chat-o"  :text="(scoreFlag?'已':'')+'评分'" :color="scoreFlag?'red':'#888'" @click="changeScore" />
            <van-goods-action-icon icon="like"  :text="(likeFlag?'已':'')+'点赞'" :color="likeFlag?'red':'#888'" @click="onClickIcon" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="gotoShopCar" />
            <van-goods-action-button
                type="danger"
                text="加入购物车"
                @click="onClickButton"
            />
        </van-goods-action>
        <!-- 评分操作 -->
        <van-popup
        v-model="show"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '30%' }"
        >
        <van-rate v-model="value" 
          :size="30"
          color="red"
          void-icon="like-o"
          icon="like" 
          void-color="#000"
          @change="changrValue"
        />
        <div class="liuyan">
        <input type="text" placeholder="请留下你的评论" class="inp1" ref='inp1'><button @click="sendpinlun">发送</button>
         </div>
        </van-popup>
       
  </div>
</template>

<script>
export default {
  data() {
    return {
    shopId:null,
    shopTit:null,
    shopPri:null,
    shopImg:null,
    likeFlag:false,
    likeId:null,
    show: false,
    value:1,
    scoreFlag:false
    }
  },
  props:['count'],
  methods: {

    //跳转到购物车
    gotoShopCar(){
      if(this.userInfo){
        this.$router.push({
          name:"shopCar"
        })
      }else{
           this.$dialog.confirm({
                title: '操作提示',
                message: '请先登录~~~',
            })
            .then(() => {
               this.$router.push({
                 name:'login'
               })
            }).catch(() => {
                console.log(1);
            })
      }
    },

    //评分操作
    //关闭弹出层
    changeScore(){
        this.show = true;
    },
    changrValue(value){
     console.log(value);
     if(this.userInfo){
       if(this.scoreFlag){
            this.$toast("已评分")
       }
       else{
          //加入评分表,分数
          this.$ajax.addSocre({
         phone:this.userInfo.phone,
         shopId:this.shopId,
         shopValue:value
       }).then(res=>{
         this.scoreFlag=true;
         this.$toast("感谢你的评分")
       })
       }
     }else{
       this.$dialog.confirm({
                title: '操作提示',
                message: '请先登录~~~',
            })
            .then(() => {
               this.$router.push({
                 name:'login'
               })
            }).catch(() => {
                console.log(1);
            })
     }

    },
    //pinglun    addLiuyan
sendpinlun(){
  let inpVaules=this.$refs.inp1.value;
  console.log(inpVaules);
 if(this.userInfo){
     this.$ajax.addLiuyan({   
         phone:this.userInfo.phone,
         shopId:this.shopId,
         content:inpVaules
       }).then(res=>{
         this.$toast("留言成功")
       })
 }else{
       this.$dialog.confirm({
                title: '操作提示',
                message: '请先登录~~~',
            })
            .then(() => {
               this.$router.push({
                 name:'login'
               })
            }).catch(() => {
                console.log(1);
            })
     }
},
  //点赞操作
    onClickIcon() {
     //将商品id，用户id，
     if(this.userInfo){
       if(this.likeFlag){
       //已经点赞，删除
       this.$ajax.delLike(this.likeId). then(res=>{
                        this.likeFlag = false;
                        this.$toast("取消点赞成功")
                    })
     }
     else{
       //加入点赞表
       this.$ajax.addLike({
         userInfo:this.userInfo,
         phone:this.userInfo.phone,
         shopId:this.shopId,
          shopTit:this.shopTit,
          shopImg:this.shopImg,
       }).then(res=>{
         this.likeFlag=true;
         this.likeId=res.id;
         this.$toast("点赞成功")
       })
     }
     }else{
       this.$dialog.confirm({
                title: '操作提示',
                message: '请先登录~~~',
            })
            .then(() => {
               this.$router.push({
                 name:'login'
               })
            }).catch(() => {
                console.log(1);
            })
     }
    },
    //加入购物车表
    onClickButton() {
      
      if(this.userInfo){
        console.log(this.count);
        //判断购物车有没有当前商品
        this.$ajax.findcar({
          phone:this.userInfo.phone,
          shopId:this.shopId
        }).then(res=>{
            if(res.length>0){
              console.log(res[0].count);
              this.$ajax.setCar({
                count:res[0].count+this.count
              },res[0].id).then(res=>{
                this.$toast('累计加入购物车成功')
              })
            }else{
              //查询不到就加入购物车
              this.$ajax.addShopCar({
                phone:this.userInfo.phone,
                shopId:this.shopId,
                userInfo:this.userInfo,
                count:this.count,
                shopTit:this.shopTit,
                shopPri:this.shopPri,
                shopImg:this.shopImg,
                check:false,
              }).then(res=>{
                        this.$toast('新增购物车成功')
                      })
            }
        })
      }else{
          this.$dialog.confirm({
                title: '操作提示',
                message: '请先登录~~~',
            })
            .then(() => {
               this.$router.push({
                 name:'login'
               })
            }).catch(() => {
                console.log(1);
            })
      }
    },
    //查询点赞表里的数据
    async checkLike(){
      let res=await this.$ajax.findLike({
        shopId:this.shopId,
        phone:this.userInfo.phone
      })
      console.log(res);
      if(res.length>0){
        this.likeFlag=!!res.length
        this.likeId=res[0].id
      }
    },
    //查询是否评分findSocre
    async checkSocre(){
      let res=await this.$ajax.findSocre({
        shopId:this.shopId,
        phone:this.userInfo.phone
      })
      console.log(res);
      if(res.length>0){
        
        this.value=res[0].shopValue
        console.log(res[0].shopValue);
        console.log(this.value);
        this.scoreFlag=!!res.length
      }
    }
  },
  mounted() {
    console.log(this.$route.query);
   
  
    if(this.$route.query.id){
     this.shopId=this.$route.query.id
    }else{
      this.shopId=this.$route.query.itemsId
    }
      // console.log(this.shopId);
    if(this.$route.query.title){
      this.shopTit=this.$route.query.title
    }else if(this.$route.query.project_name){
      this.shopTit=this.$route.query.project_name
    }else{
      this.shopTit=this.$route.query.name
    }
    // console.log(this.shopTit);

    if(this.$route.query.price_low){
      this.shopPri=(this.$route.query.price_low)/100
    }else{
      
       this.shopPri=this.$route.query.priceDesc[0]
    }
    // console.log(this.shopPri);
    if(this.$route.query.firstImgUrl){
      this.shopImg=this.$route.query.firstImgUrl
    }
    else if(this.$route.query.img){
      this.shopImg=this.$route.query.img
    }
    else{
      this.shopImg=this.$route.query.cover
    }
    // console.log(this.shopImg);
    if(this.userInfo){
      this.checkLike()
      this.checkSocre()
    }
  },
}
</script>

<style>
.van-rate{
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
}
.liuyan{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.liuyan button{
 padding: 10px;
 font-size: 20px;
 border-radius:10px ;
}
.inp1{
font-size: 20px;
  height: 50px;
  width: 200px;
  border: 1px solid black;
  margin-left: 20px;
  margin-right:20px ;
  padding-left: 10px;
  border-radius:10px ;
}
</style>